<template>
  <div>
    <Card>
			<div class="form-div">
				<label for="" class="form-label">名称：</label>
				<Input v-model="name" placeholder="请输入名称" style="width:200px"/>
				<label for="" class="form-label">类型：</label>
				<Select v-model="type" style="width:200px">
						<Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
				<label for="" class="form-label">应用分组：</label>
				<Select v-model="nameSpace" style="width:200px">
						<Option v-for="item in nameList" :value="item.metadata.name" :key="item.metadata.name">{{ item.metadata.name }}</Option>
				</Select>
				<Button type="primary" @click="seacher" style="margin: 0 20px;">搜索</Button>
				<Button type="primary" @click="resetList">刷新</Button>
			</div>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count"  show-elevator show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
					title: '类型',
					key: 'appType'
				},
        {
					title: '容器名称',
					key: 'containerName'
				},
				{
					title: '容器端口',
					key: 'containerPort'
				},
				{
					title: '创建时间',
					key: 'createTime'
				},
				{
					title: '外部端口',
					key: 'hostPort'
				},
				{
					title: '名称',
					key: 'name'
				},
				{
					title: '应用分组',
					key: 'nameSpace'
				},
				{
					title: '节点名称',
					key: 'nodeName'
				},
				{
					title: '创建者',
					key: 'owner'
				},
				{
					title: '创建语句',
					key: 'yamltext',
					render: (h, params) => {
						return h('div', {
								style: {
									height: '18px',
									whiteSpace: 'nowrap'
								}
							},
							params.row.yamltext
						)
					}
				},
				{
          title: '操作',
          key: 'handle',
          render: (h, params) => {
						return h('div', [
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												let my = params.row
												this.$Modal.info({
													title: '详情',
													width: '800',
													content: `<div class="myBox">
																			<div class="left">类型：${this.isNull(my.appType)}</div><div class="right">容器名称：${this.isNull(my.containerName)}</div>
																			<div class="left">容器端口：${this.isNull(my.containerPort)}</div><div class="right">创建时间：${this.isNull(my.createTime)}</div>
																			<div class="left">外部端口：${this.isNull(my.hostPort)}</div><div class="right">名称：${this.isNull(my.name)}</div>
																			<div class="left">应用分组：${this.isNull(my.nameSpace)}</div><div class="right">节点名称：${this.isNull(my.nodeName)}</div>
																			<div class="left">创建者：${this.isNull(my.owner)}</div>
																			<div class="recordBox" style="clear: both">
																				<span>创建语句：</span>
																				<textarea class="texteara" readonly>${this.isNull(my.yamltext)}</textarea>
																			</div>
																		</div>`
												})
											}
									}
							}, '查看详情')
						])
					}
        }
      ],
      tableData: [],
			count: 0,
			pageSize: 5,
			page: 1,
			type: '',
			typeList: [
				{
					value: 'StorageClass',
					label: '存储类'
				},
				{
					value: 'PersistentVolumeClaim',
					label: '持久化存储卷声明'
				},
				{
					value: 'PersistentVolume',
					label: '持久化存储卷'
				},
				{
					value: 'Deployment',
					label: '部署'
				},
				// {
				// 	value: 'ReplicationController',
				// 	label: '副本控制器'
				// },
				{
					value: 'Service',
					label: '服务'
				},
				{
					value: 'Pod',
					label: '容器'
				},
				{
					value: 'ServiceAccount',
					label: '服务账户'
				},
				{
					value: 'ClusterRole',
					label: '集群管理员'
				},
				{
					value: 'ClusterRoleBinding',
					label: '集群角色绑定'
				},
				{
					value: 'Role',
					label: '应用角色'
				},
				{
					value: 'RoleBinding',
					label: '应用角色绑定'
				}
			],
			name: '',
			nameSpace: '',
			nameList: [],
			detail: false,
			text: '',
			yml: ''
    }
  },
  methods: {
		// 分页跳转
		handlePage (value) {
			this.page = value
			this.getList()
		},
		// 获取列表
		getList () {
			this.$api.get(0, '/kuber/v2/appsRecord/page?page=' + this.page + '&limit=' + this.pageSize, {}, r => {
				if (r.data.code === 0) {
					this.tableData = r.data.data.data
					this.count = r.data.data.total
				}
			})
		},
		// 获取应用分组
		getNameSpaceList () {
			this.$api.get(0, '/kuber/v2/k8s/nameSpace', {}, r => {
				this.nameList = r.data.data.items
			})
		},
		// 搜索
		seacher () {
			let serch = '/kuber/v2/appsRecord/page?page=' + this.page + '&limit=' + this.pageSize
			if (this.name !== undefined && this.name !== '' && this.name !== null) {
				serch += '&name=' + this.name
			}
			if (this.type !== undefined && this.type !== '' && this.type !== null) {
				serch += '&appType=' + this.type
			}
			if (this.nameSpace !== undefined && this.nameSpace !== '' && this.nameSpace !== null) {
				serch += '&nameSpace=' + this.nameSpace
			}
			this.$api.get(0, serch, {}, r => {
				if (r.data.code === 0) {
					this.tableData = r.data.data.data
					this.count = r.data.data.total
				}
			})
		},
		// 刷新表格
		resetList () {
			this.page = 1
			this.name = ''
			this.type = ''
			this.nameSpace = ''
			this.getList()
		},
		isNull (data) {
			if (data === null) {
				return '空'
			} else {
				return data
			}
		}
  },
  mounted () {
		this.getList()
		this.getNameSpaceList()
  }
}
</script>

<style>
  ul.ivu-page{
		margin-top:20px
	}
	div.form-div{
		margin-bottom:15px;
	}
	label.form-label{
		display:inline-block;
		width:100px;
		text-align: right;
		margin-right:15px
	}
	.role-menu-box{
		margin-top:15px;
	}
	.role-menu-box label.form-label{
		float:left;
	}
	.role-menu-box:after{
		content: "";
		display: block;
		clear: both;
	}
	.role-menu-box .ivu-checkbox-group-item{
		margin:0 10px 10px
	}
	.set-menu-box{
		margin-left:115px
	}
	.set-menu-checkbox{
		display:inline-block;
		margin:0 10px 10px 0
	}
	.set-menu-checkbox input{
		position:relative;
		top:2px;
		margin-right:2px
	}
</style>
